<template>
  <div class="usesale">
    <v-chart :option="getOption()" autoresize></v-chart>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import * as echarts from 'echarts'
const data = ref([10, 2.6, 3.6, 8, 1.1, 5.9, 7.2, 8.5])
let dataList = ref([
  {name: '公寓租赁', max:10},
  {name: '车位租赁', max:10},
  {name: '场地租赁', max:10},
  {name: '仓库租赁', max:10},
  {name: '房屋租赁', max:10},
])
const getOption = () => {
  return {
    tooltip: {},
    title: {
      text: '单位: 元/月/m³',
      left: 0,
      top: 0,
      textStyle: {
        color: '#F2F3F5',
        fontSize: 22,
      },
    },
    radar: {
      center: ['50%', '50%'],
      radius: '75%',
      nameGap: 0,
      indicator: dataList.value,
      splitLine: {
        show: true,
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      name: {
        formatter: (text, indicator) => {
          console.log(text)

          const idx = dataList.value.findIndex((item) => item.name === text)
          console.log(idx, '2')

          const val = data.value[idx] ?? ''
          return `${text} ${val}`
        },
        textStyle: {
          color: '#F2F3F5',
          fontSize: '20',
          borderRadius: 3,
          padding: [3, 5],
        },
      },
    },
    series: [
      {
        type: 'radar',
        data: [data.value],
        name: '平均租金',
        label: {
          show: true,
          formatter: function (params) {
            return params.value
          },
          color: '#bdd3ed',
          align: 'right',
          distance: 10,
          align: 'right',
        },
        symbolSize: 10,
        lineStyle: {
          //边缘颜色
          width: 0,
        },
        itemStyle: {
          borderWidth: 1,
          color: '#fff',
          borderColor: '#F2F063',
        },
        areaStyle: {
          color: 'rgba(0, 255, 255, 1)',
          opacity: 0.6,
        },
      },
      {
        type: 'radar',
        name: '平均租金',
        data: [[10, 10, 10, 10, 10, 10, 10, 10]],
        symbol: 'none',
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: 'rgb(0, 255, 255)',
        },

        areaStyle: {
          color: 'rgba(0, 255, 255, 0.05)',
        },
      },
      {
        type: 'radar',
        name: '平均租金',
        data: [[9, 9, 9, 9, 9, 9, 9, 9]],

        symbol: 'none',
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: 'rgb(0, 255, 255)',
        },

        areaStyle: {
          color: 'rgba(0, 255, 255,0.12)',
        },
      },
      {
        type: 'radar',
        name: '平均租金',
        data: [[8, 8, 8, 8, 8, 8, 8, 8]],

        symbol: 'none',
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: 'rgb(0, 255, 255)',
        },

        areaStyle: {
          color: 'rgba(0, 255, 255,0.18)',
        },
      },
      {
        type: 'radar',
        name: '平均租金',
        data: [[7, 7, 7, 7, 7, 7, 7, 7]],

        symbol: 'none',
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: 'rgb(0, 255, 255)',
        },

        areaStyle: {
          color: 'rgba(0, 255, 255,0.19)',
        },
      },
      {
        type: 'radar',
        name: '平均租金',
        data: [[6, 6, 6, 6, 6, 6, 6, 6]],

        symbol: 'none',
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: 'rgb(0, 255, 255)',
        },

        areaStyle: {
          color: 'rgba(0, 255, 255,0.17)',
        },
      },
      {
        type: 'radar',
        name: '平均租金',
        data: [[5, 5, 5, 5, 5, 5, 5, 5]],
        symbol: 'none',
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: 'rgb(0, 255, 255)',
        },

        areaStyle: {
          color: 'rgba(0, 255, 255,0.16)',
        },
      },
      {
        type: 'radar',
        name: '平均租金',
        data: [[4, 4, 4, 4, 4, 4, 4, 4]],

        symbol: 'none',
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: 'rgb(0, 255, 255)',
        },

        areaStyle: {
          color: 'rgba(0, 255, 255,0.13)',
        },
      },
    ],
  }
}
</script>

<style lang="scss" scoped>
.usesale {
  margin-top: 5px;
  height: 90%;
  background-color: rgba(37, 62, 112, 0.5);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
</style>
